<template>
	<div>
		<ul class="list-content">
			<li
				class="list-item"
				v-for="item in list"
				:key="item.id"
				@click="tolist(item)"
			>
				<touch-slide
					:name="item.id"
					:hasOpend="hasOpenedSlide"
					:disabled="item.isStatic"
					:before-close="beforeClose"
					@open="slideOpen"
					@close="slideClose"
				>
					<template #default>
						<div class="list-item-content">
							<span class="ico">
								<span v-if="item.icon !== 'list'" class="icon iconfont">
									{{ item.icon }}
								</span>
								<i v-else class="icon iconfont">&#xe65d;</i>
							</span>
							<span class="name">{{ item.title }}</span>
							<span class="count">{{ unTodoCount(item.tasks) }}</span>
						</div>
					</template>
					<template #right>
						<div class="list-item-delete" @click="remove(item)">删除</div>
					</template>
				</touch-slide>
			</li>
		</ul>
	</div>
</template>

<script lang="ts">
import { computed, defineComponent, ref } from 'vue'
import { Item, Task } from '@/types/list'
import router from '@/router'
import { useStore } from '@/store'
import { useModal } from '@/plugins/modal/api'

const _listModule = () => {
	const store = useStore()
	const activeId = ref('')
	const list = computed(() => store.state.list.list)

	const unTodoCount = (list: Task[]) => {
		return list.filter((v) => !v.isDone).length
	}

	store.dispatch('list/getList', store.state.user.userInfo.id)

	const tolist = (item: Item) => {
		router.push({
			path: `/todos/${item.id}`,
			query: { name: item.title }
		})
	}

	const remove = (item: Item) => {
		useModal({
			content: `确认删除“${item.title}”`,
			async confirm() {
				await store.dispatch('list/delList', item.id)
			}
		})
	}

	return {
		activeId,
		list,
		tolist,
		remove,
		unTodoCount
	}
}

const _slideModuel = () => {
	const openedSlides = ref<string[]>([])
	const slideOpen = (opts: Record<string, any>) => {
		openedSlides.value.push(opts.name)
	}
	const slideClose = (opts: Record<string, any>) => {
		openedSlides.value = openedSlides.value.filter((str) => str !== opts.name)
	}

	const hasOpenedSlide = computed(() => openedSlides.value.length > 0)

	const beforeClose = (args: any) => {
		console.log('beforeclose', args)
		return true
	}
	return {
		slideOpen,
		slideClose,
		hasOpenedSlide,
		beforeClose
	}
}

export default defineComponent({
	setup() {
		return {
			..._slideModuel(),
			..._listModule()
		}
	}
})
</script>

<style lang="less" scoped>
.list-content {
	list-style: none;
	user-select: none;
}
.list {
	&-item {
		&-content {
			padding: 16px 20px;
			display: flex;
			align-items: center;
			.ico {
				display: inline-block;
				width: 40px;
				height: 40px;
				line-height: 40px;
				text-align: center;
				.iconfont {
					font-size: 32px;
				}
			}
			.name {
				margin-left: 20px;
			}
			.count {
				margin-left: auto;
				font-size: 28px;
				color: #7e7e7e;
			}
			&:active {
				background-color: #f8f8f8;
			}
		}
		&-delete {
			color: #fff;
			background-color: #ff4c4c;
			width: 140px;
			height: 100%;
			display: flex;
			align-items: center;
			justify-content: center;
		}
	}
}
</style>
